import styled from '@emotion/styled'
import { Button, Drawer, Form, Input, Spin } from 'antd'
import useForm from 'antd/lib/form/hooks/useForm'
import { ErrorBox } from 'components/lib'
import { UserSelect } from 'components/UserSelect'
import React, { useEffect } from 'react'
import { useAddProject, useEditProject } from 'utils/project'
import { useProjectModal, useProjectsQueryKey } from './util'

// export const ProjectModal = (props:{projectModalOpen:boolean,onClose:()=>void}) =>{
export const ProjectModal = () =>{
  const {projectModalOpen,close,editingProject,isLoading} = useProjectModal()
  const useMutateProject = editingProject? useEditProject :useAddProject 
  // return <Drawer onClose={props.onClose} visible={props.projectModalOpen} width={'100%'}>
  //   <h1>ProjectModal</h1>
  //   <Button onClick={props.onClose}>关闭</Button>
  // </Drawer>
  const title = editingProject ? '编辑项目' : '创建项目'

  const {mutateAsync,error,isLoading:mutateLoading} = useMutateProject(useProjectsQueryKey())
  const [form] =useForm()

  const onFinish = (values :any) =>{
    mutateAsync({...editingProject,...values}).then(()=>{
      form.resetFields()
      close()
    })
  }

  const cloaseMode = ()=>{
    form.resetFields()
    close()
  }
  useEffect(() =>{
    form.setFieldsValue(editingProject)
  },[editingProject,form])

  return (
    <Drawer
      onClose={cloaseMode} 
      visible={projectModalOpen} 
      width={'100%'}
      forceRender= {true}
    >
      <Container>
      {
        isLoading ? <Spin size='large'></Spin> : 
        <>
          <h1>{title}</h1>
          <ErrorBox error={error}></ErrorBox>
          <Form form={form} layout='vertical' style={{width:'40rem'}} onFinish={onFinish}>
            <Form.Item label="名称" name={'name'} rules={[{required:true,message:'请输入项目名'}]}>
              <Input placeholder='请输入项目名称'/>
            </Form.Item>
            <Form.Item label="部门" name={'organization'} rules={[{required:true,message:'请输入部门名'}]}>
              <Input placeholder='请输入部门名'/>
            </Form.Item>
            <Form.Item label="负责人" name={'personId'}>
              <UserSelect defaultOptionName='负责人' />
            </Form.Item>
            <Form.Item>
              <Button loading={mutateLoading} type={'primary'} htmlType={'submit'}>提交</Button>
            </Form.Item>
          </Form>
        </>
      }
      </Container>
    </Drawer>
  )
}

const Container = styled.div`
  height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
`